<template>
	<view id="orderCenterPage">
		<view class="tab-switch">
			<view class="tab" v-for="(item,index) in tabs" :key="item.key" :class="{'active': active === index}" @click="tabSwitch(index)">
				{{item.value}}
			</view>
		</view>
		<view class="orders-wrapper" v-if="active === 0" key="all">
			<view class="title">
				<view class="title-type">
					已完成订单
				</view>
				<view class="title-time">
					2019-08-15 12:00:00
				</view>
			</view>
			<view class="product-item" v-for="(item,index) in finishList" :key="item.id" @click="toProdDetail">
				<image src="../../static/img/nav-arrow.png" class="nav-arrow" mode="aspectFill"></image>
				<image class="goods" src="../../static/img/goods.png" mode="aspectFill"></image>
				<view class="product-con">
					<view class="goods-title">
						{{item.name}}
					</view>
					<view class="goods-intro">
						尺寸:{{item.size}}，材质:{{item.material}}，样式:{{item.style}}
					</view>
					<view class="goods-footer">
						<view class="goods-price">
							<text class="unit">￥</text>
							<text class="val">{{item.price}}</text>
						</view>
						<view class="count">
							x{{item.num}}
						</view>
					</view>
				</view>
			</view>
			<view class="title">
				<view class="title-type" @click="doCheckAll">
					<image v-if="!isCheckAll" key="check" src="../../static/img/select.png" mode="aspectFill" class="select title-sel"></image>
					<image v-else key="checked" src="../../static/img/tick.png" mode="aspectFill" class="select title-sel"></image>
					<text>待付款订单</text>
				</view>
				<view class="title-time">
					2019-08-15 12:00:00
				</view>
			</view>
			<view class="product-item" v-for="(item,index) in waitPayList" :key="item.id">
				<image v-if="item.checked" key="checked" src="../../static/img/selected.png" class="sel-ico item-sel" mode="aspectFill" @click="doCheck(item)"></image>
				<image v-else key="check" src="../../static/img/select.png" class="sel-ico item-sel" mode="aspectFill" @click="doCheck(item)"></image>
				<image class="goods goods-longer" src="../../static/img/goods.png" mode="aspectFill"></image>
				<view class="product-con">
					<view class="goods-title">
						{{item.name}}
					</view>
					<view class="goods-intro">
						尺寸:{{item.size}}，材质:{{item.material}}，样式:{{item.style}}
					</view>
					<view class="goods-footer">
						<view class="goods-price">
							<text class="unit">￥</text>
							<text class="val">{{item.price}}</text>
						</view>
						<view class="count-box">
							<uni-number-box :min="1" :max="9999"  @change="numChange($event,index)" :value="item.num"></uni-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="orders-wrapper" v-if="active === 1" key="waitPayList">
			<view class="title" @click="doCheckAll">
				<view class="title-type">
					<image v-if="!isCheckAll" key="check" src="../../static/img/select.png" mode="aspectFill" class="select title-sel"></image>
					<image v-else key="checked" src="../../static/img/tick.png" mode="aspectFill" class="select title-sel"></image>
					<text>待付款订单</text>
				</view>
				<view class="title-time">
					2019-08-15 12:00:00
				</view>
			</view>
			<view class="product-item" v-for="(item,index) in waitPayList" :key="item.id">
				<image v-if="item.checked" key="checked" src="../../static/img/selected.png" mode="aspectFill" class="select item-sel" @click="doCheck(item)"></image>
				<image v-else key="check" src="../../static/img/select.png" mode="aspectFill" class="select item-sel" @click="doCheck(item)"></image>
				<image class="goods goods-longer" src="../../static/img/goods.png" mode="aspectFill"></image>
				<view class="product-con">
					<view class="goods-title">
						{{item.name}}
					</view>
					<view class="goods-intro">
						尺寸:{{item.size}}，材质:{{item.material}}，样式:{{item.style}}
					</view>
					<view class="goods-footer">
						<view class="goods-price">
							<text class="unit">￥</text>
							<text class="val">{{item.price}}</text>
						</view>
						<view class="count-box">
							<uni-number-box :min="1" :max="9999" @change="numChange($event,index)" :value="item.num"></uni-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="orders-wrapper" v-if="active === 2" key="waitSendList">
			<view class="title">
				<view class="title-type">
					<text>待发货订单</text>
				</view>
				<view class="title-time">
					2019-08-15 12:00:00
				</view>
			</view>
			<view class="product-item" v-for="(item,index) in waitSendList" :key="item.id"  @click="toProdDetail">
				<image src="../../static/img/nav-arrow.png" class="nav-arrow" mode="aspectFill"></image>
				<image class="goods" src="../../static/img/goods.png" mode="aspectFill"></image>
				<view class="product-con">
					<view class="goods-title">
						{{item.name}}
					</view>
					<view class="goods-intro">
						尺寸:{{item.size}}，材质:{{item.material}}，样式:{{item.style}}
					</view>
					<view class="goods-footer">
						<view class="goods-price">
							<text class="unit">￥</text>
							<text class="val">{{item.price}}</text>
						</view>
						<view class="count">
							x{{item.num}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="orders-wrapper" v-if="active === 3" key="waitSendReceive">
			<view class="title">
				<view class="title-type">
					<text>待收货订单</text>
				</view>
				<view class="title-time">
					2019-08-15 12:00:00
				</view>
			</view>
			<view class="product-item" v-for="(item,index) in waitSendReceive" :key="item.id"  @click="toProdDetail">
				<image src="../../static/img/nav-arrow.png" class="nav-arrow" mode="aspectFill"></image>
				<image class="goods" src="../../static/img/goods.png" mode="aspectFill"></image>
				<view class="product-con">
					<view class="goods-title">
						{{item.name}}
					</view>
					<view class="goods-intro">
						尺寸:{{item.size}}，材质:{{item.material}}，样式:{{item.style}}
					</view>
					<view class="goods-footer">
						<view class="goods-price">
							<text class="unit">￥</text>
							<text class="val">{{item.price}}</text>
						</view>
						<view class="count">
							x{{item.num}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="orders-wrapper" v-if="active === 4" key="finishList">
			<view class="title">
				<view class="title-type">
					<text>已完成订单</text>
				</view>
				<view class="title-time">
					2019-08-15 12:00:00
				</view>
			</view>
			<view class="product-item" v-for="(item,index) in finishList" :key="item.id"  @click="toProdDetail">
				<image src="../../static/img/nav-arrow.png" class="nav-arrow" mode="aspectFill"></image>
				<image class="goods" src="../../static/img/goods.png" mode="aspectFill"></image>
				<view class="product-con">
					<view class="goods-title">
						{{item.name}}
					</view>
					<view class="goods-intro">
						尺寸:{{item.size}}，材质:{{item.material}}，样式:{{item.style}}
					</view>
					<view class="goods-footer">
						<view class="goods-price">
							<text class="unit">￥</text>
							<text class="val">{{item.price}}</text>
						</view>
						<view class="count">
							x{{item.num}}
						</view>
					</view>
				</view>
			</view>
		</view>

		
		
		<view class="cart-footer" v-show="[0,1].includes(active)">
			<view class="check-all" @click="doCheckAll">
				<image v-if="!isCheckAll" key="check" class="check-ico" src="../../static/img/Btn_select.png" mode="aspectFill"></image>
				<image v-else key="checked" class="check-ico" src="../../static/img/Btn_select_per.png" mode="aspectFill"></image>
				<view class="lab">全选</view>
			</view>
			<view class="total-wrapper">
				<view class="total-tit">
					<text class="total-label">总计：</text>
					<text class="total-price">￥{{total}}</text>
				</view>
				<view class="total-detail" @click="open">
					<text class="det-txt">价格明细</text>
					<image class="det-arrow" src="../../static/img/arrow-down.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="sumbit" @click="toOrder">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	import { tabs, orders } from '../../utils/data.js'
	export default {
		components: {uniNumberBox},
		data() {
			return {
				tabs,
				active: 0,
				list: orders,
				waitPayList: orders.map(item => {
					item.total = item.price * item.num
					if (item.status === '待付款') {
						return item
					}
				}).filter(x=>x!=undefined),
				waitSendList: orders.map(item => {
					if (item.status === '待发货') {
						return item
					}
				}).filter(x=>x!=undefined),
				waitSendReceive: orders.map(item => {
					if (item.status === '待收货') {
						return item
					}
				}).filter(x=>x!=undefined),
				finishList: orders.map(item => {
					if (item.status === '已完成') {
						return item
					}
				}).filter(x=>x!=undefined),
				isCheckAll: false
			}
		},
		computed: {
			total() {
				let sums = this.waitPayList.map(item=>{
					if (item.checked) {
						return item.total
					}
				})
				
				let tot = sums.reduce((t=0,n=0) => {
					return t+n
				})
				return tot || 0
			}
		},
		methods: {
			doCheckAll() {
				this.isCheckAll = !this.isCheckAll
				this.waitPayList = this.waitPayList.map(item => {
					item.checked = this.isCheckAll
					return item
				})
			},
			doCheck(item) {
				item.checked = !item.checked
			},
			numChange(val,i) {
				this.waitPayList = this.waitPayList.map((item,index) => {
					if (i===index) {
						item.num = val
					}
					item.total = item.price * item.num
					return item
				})
				
			},
			
			
			tabSwitch(i) {
				this.active = i
			},
			toProdDetail() {
				uni.navigateTo({
					url: '../prodDetail/prodDetail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		onLoad(opt) {
			this.active = opt.active * 1
		}
	}
</script>

<style>
.tab-switch {
	height: 71upx;
	background: #FFFFFF;
	display: flex;
}
.tab {
	flex: 1;
	font-size:28upx;
	font-weight:500;
	color:rgba(34,34,34,1);
	text-align: center;
	line-height: 71upx;
	position: relative;
}
.active {
	color: #EA0A2A;
}
.active:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -42upx;
	width:84upx;
	height:2upx;
	background:rgba(234,10,42,1);
}
.orders-wrapper {
	position: absolute;
	top: 71upx;
	left: 0;
	right: 0;
	bottom: 108upx;
	z-index: 13;
	overflow-y: auto;
	overflow-x: hidden;
}
.title {
	height: 60upx;
	background:rgba(247,247,247,1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size:24upx;
	color: #999999;
	padding: 0 29upx 0 23upx;
}
.title-type {
	display: flex;
	align-items: center;
}
.product-list {
	padding-top: 29upx;
}
.product-item {
	height: 159upx;
	display: flex;
	padding:  44upx 31upx 39upx 24upx;
	position: relative;
	border-bottom: 1upx solid #F7F7F7;
}
.nav-arrow {
	position: absolute;
	top: 49upx;
	right: 31upx;
	width: 15upx;
	height: 29upx;
}
.goods {
	width: 159upx;
	height: 159upx;
	flex: 1 159upx 0;
}
.goods-longer {
	flex: 2 159upx 0;
	min-width: 159upx;
}
.product-con {
	flex: 3;
	padding-left: 23upx;
}
.goods-title {
	font-size:30upx;
	font-weight:500;
	color:rgba(51,51,51,1);
	padding-top: 7upx;
}
.goods-intro {
	font-size:24upx;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(102,102,102,1);
	margin-top: 17upx;
}
.goods-footer {
	font-size:24upx;
	font-weight:500;
	color:rgba(102,102,102,1);
	margin: 30upx 114upx 0 0;
	display: flex;
	justify-content: space-between;
}
.goods-price {
	font-size:34upx;
	font-weight:bold;
	color:rgba(234,10,42,1);
}
.unit {
	font-size: 24upx;
}
.count {
	font-size:24upx;
	font-weight:500;
	color:rgba(102,102,102,1);
	transform: translateY(12upx);
}
.select {
	width: 36upx;
	height: 36upx;
}
.title-sel {
	margin: 0 19upx 0 0;
}
.item-sel {
	margin: 59upx 37upx 0 0;
	min-width: 37upx;
	height: 37upx;
	flex: 1 37upx 0;
}
.count-box {
	margin-left: 85upx;
}
</style>
